<template>
	<scroll-view scroll-x class="bg-white nav collection-types">
		<view class="flex text-center">
			<view
				:class="
					'cu-item flex-sub ' + (item[valueName] == value ? 'cur text-' + theme.themeColor : '')
				"
				v-for="(item, index) in tabs"
				:key="index"
				@tap="changeModel(item)"
				>{{ item[fieldName] }}</view
			>
		</view>
	</scroll-view>
</template>

<script>
const app = getApp();
export default {
	name: "tab",
	props: {
		value: {
			type: String,
			default: null,
		},
		tabs: {
			type: Array,
			default: () => [],
		},
		fieldName: {
			type: String,
			default: "label",
		},
		valueName: {
			type: String,
			default: "value",
		},
	},
	model: {
		prop: "value",
		event: "input",
	},
	data() {
		return {
			theme: app.globalData.theme,
		};
	},
	methods: {
		changeModel(item) {
			this.$emit("input", item[this.valueName]);
			this.$emit("change", item);
		},
	},
};
</script>

<style lang="scss" scoped>
.tab {
	display: flex;
	align-items: center;
	height: 100rpx;
	background-color: #fff;
	width: 1100%;
	overflow-x: auto;
}
.tab-item {
	/* text-align: center; */
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.label {
	border-bottom: 4rpx solid transparent;
	height: 100%;
	display: flex;
	align-items: center;
}
.active {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
</style>
